<template>
  <div class="category">
    <p class="title">{{ title }}</p>
    <div class="content">
      <slot name="content"></slot>
    </div>

    <div class="footer">
      <slot name="footer">
        <button>取消</button>
        <button @click="emit('comfirm')">确定</button>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts" name="Caregory">
defineProps(["title"]);
const emit = defineEmits(["comfirm"]);
</script>

<style scoped lang="scss">
.category {
  margin-top: 5px;
  width: 200px;
  background-color: skyblue;
  height: 200px;
  padding: 10px;

  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    background-color: pink;
  }
  .content {
    margin-top: 5px;
    height: 125px;
    background-color: orange;
    box-sizing: border-box;
    overflow: hidden;
  }
  .footer {
    display: flex;
    justify-content: space-evenly;
    background-color: pink;
  }
}
</style>
